import React, { Component } from 'react';
class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      u_name:''
    }
  }
  componentDidMount () {
    let uname = JSON.parse(localStorage.getItem('u_name'))
    this.setState({
      u_name:uname
    })
    // let uidt = JSON.parse(localStorage.getItem('uid'))
    // let uid = JSON.parse(uidt)
    // let arrs = []
    // fetch(`http://sun.daxunxun.com/api/collect/user?uid=`+uid)
    // .then(res => res.json())
    // .then(data => {
    //   console.log(data)
    //   for(let i=0; i<data.length;i++){
    //     // console.log(data[i].f_id)
    //     let fid = data[i].f_id
    //     fetch(`http://sun.daxunxun.com/api/food/detail?f_id=`+fid)
    //     .then(res => res.json())
    //     .then(data => {
    //       console.log(data)
    //       arrs.push(data)
    //       this.setState({
    //         userList:arrs
    //       })
    //       localStorage.setItem('foodlist', JSON.stringify(data))
    //     })
    //   }
    // })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  render () {
    let uname = this.state.u_name;
    // let cookList = this.state.userList;
    // console.log(cookList)   // 一次只出现了一个数据
    // let arr = []
    // for (let i in cookList) {
    //   let list = cookList[i]
    //   for (let j in list) {
    //     console.log(list[j])
    //     let after = list[j]
    //     arr.push(after)
    //   }
    // }
    return (
      <div className="cook">
         <h3>{ uname }的作品&nbsp;<span>(</span><a href="/cookde">查看全部作品</a> <span>)</span></h3>
        {/* <div className="cook_list">
          <ul>
            {
              arr.map((item,index) => {
                return(
                  <li onClick={ this.goDetail.bind(this, item.f_id) } key={index} >
                    <img src={ item.banner } alt=""/>
                    <a href="/detail/:id">{ item.name}</a>
                    <span className="sp1">{ item.number} 做过</span>
                    <span className="sp2">{ item.score} 收藏</span>
                    <a href="/user/:id" className="uid">{ item.u_name }</a>
                  </li>
                )
              })
            }
            
          </ul>
        </div> */}
        
        <div className="cook-container">
          <ul className="cook-container-list">
            <li>
              <div className="cook-containerImg"><img src="http://i2.chuimg.com/4cb58a5887b511e6a9a10242ac110002_1000w_667h.jpg?imageView2/2/w/660/interlace/1/q/90" alt="" /></div>
              <h2>午餐●2018年12月28日</h2>
              <p className="cook-name">最简单的做法 葱姜料酒和酱油炒一下 #晚餐●2018年12月28日#</p>
              <p className="cook-red"><span>21小时前</span><span><i className="iconfont icon-xinxi"></i>79</span><span><i className="iconfont icon-chakan"></i>1189</span></p>
            </li>
            <li>
              <div className="cook-containerImg"><img src="http://i1.chuimg.com/16253f26876d11e6a9a10242ac110002_2663w_1998h.jpg@2o_50sh_1pr_1l_660w_90q_1wh" alt="" /></div>
              <h2>午餐●2018年12月28日</h2>
              <p className="cook-name">最简单的做法 葱姜料酒和酱油炒一下 #晚餐●2018年12月28日#</p>
              <p className="cook-red"><span>22年前</span><span><i className="iconfont icon-xinxi"></i>79</span><span><i className="iconfont icon-chakan"></i>1189</span></p>
            </li>
            <li>
              <div className="cook-containerImg"><img src="http://i1.chuimg.com/a1d3371fab2f4f0ba07d6b5f2e941547_1280w_960h.jpg@2o_50sh_1pr_1l_280w_280h_1c_1e_90q_1wh" alt="" /></div>
              <h2>晚餐●2018年12月28日</h2>
              <p className="cook-name">最简单的做法 葱姜料酒和酱油炒一下 #晚餐●2018年12月28日#</p>
              <p className="cook-red"><span>21年前</span><span><i className="iconfont icon-xinxi"></i>79</span><span><i className="iconfont icon-chakan"></i>1189</span></p>
            </li>
          </ul>
        </div>  
      </div>
    )
  }
}

export default Com;